<template>
	<view class="app-order-reservation-info">
		<view class="e-p-l-20 e-p-r-20 e-p-t-30 e-p-b-30 bg-white">
			<view class="e-m-b-24">
				<text class="e-font-32">{{$t('classify.预约信息')}}</text>
			</view>
			<view class="e-flex e-m-b-20">
				<view class="app-order-reservation-info__label">{{$t('order.预约状态')}}{{$t('common.:')}}</view>
				<image src="../static/reservation_icon4.png" class="img-32" v-if="info.failState === 0"></image>
				<image src="../static/reservation_icon5.png" class="img-32" v-else></image>
				<text class="e-p-l-8">{{$t(`order.${textList[info.failState]}`)}}</text>
			</view>
			<view class="e-flex e-m-b-20">
				<view class="app-order-reservation-info__label">{{$t('order.上门顾问')}}{{$t('common.:')}}</view>
				<text >{{info.staffName}}</text>
			</view>
			<view class="e-flex e-m-b-20">
				<view class="app-order-reservation-info__label">{{$t('classify.上门时间')}}{{$t('common.:')}}</view>
				<text >{{info.appointmentTime}} {{info.appointmentTimeStr}}</text>
			</view>
			<template v-if="info.appointmentType === 2">
				<view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.上门地址')}}{{$t('common.:')}}</view>
						<text >{{info.addressDetail}}</text>
					</view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.联系人')}}{{$t('common.:')}}</view>
						<text >{{info.userName}} {{info.userPhone}}</text>
					</view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.备注')}}{{$t('common.:')}}</view>
						<text >{{info.remark||''}}</text>
					</view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.上门费')}}{{$t('common.:')}}</view>
						<text >{{$unitEn}}{{info.appointmentMoney}}{{info.state !== 0 ? `(${$t('order.已付款')})` : '' }}</text>
					</view>
					<e-line color="#DFE3E6"></e-line>
				</view>
			</template>
			<template v-else>
				<view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.上门地址')}}{{$t('common.:')}}</view>
						<text >{{info.addressDetail}}</text>
					</view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.联系人')}}{{$t('common.:')}}</view>
						<text >{{info.userName}} {{info.userPhone}}</text>
					</view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.备注')}}{{$t('common.:')}}</view>
						<text >{{info.remark||''}}</text>
					</view>
					<view class="e-flex e-m-b-20" >
						<view class="app-order-reservation-info__label">{{$t('classify.上门费')}}{{$t('common.:')}}</view>
						<text >{{$unitEn}}{{info.appointmentMoney}}{{info.state !== 0 ? `(${$t('order.已付款')})` : '' }}</text>
					</view>
					
				</view>
			</template>
			
			<view class="e-flex e-m-b-20" >
				<view class="app-order-reservation-info__label">{{$t('order.门店地址')}}{{$t('common.:')}}</view>
				<text class="c-secondary">{{info.storeAddressDetail}}</text>
			</view>
			
			
		</view>
		<e-line color="#DFE3E6"></e-line>
		<view class="e-p-l-20 e-p-r-20 e-p-t-30 e-p-b-30 bg-white">
			<view class="e-flex e-m-b-20" >
				<view class="app-order-reservation-info__label">{{$t('order.预约编号')}}{{$t('common.:')}}</view>
				<text >{{info.payCode}}</text>
			</view>
			<view class="e-flex e-m-b-20" >
				<view class="app-order-reservation-info__label">{{$t('classify.预约时间')}}{{$t('common.:')}}</view>
				<text >{{info.createTime ? $timeFormat(info.createTime,'yyyy-mm-dd hh:MM:ss') :''}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAppointmentOrderDetail } from '@/common/request/api';
	export default {
		data() {
			return {
				info: {

				},
				textList:['预约成功','预约已取消','预约已被商家取消']
			}
		},
		onLoad(opt) {
			getAppointmentOrderDetail({
				id: opt.id
			}).then(res => {
				this.loading = false
				this.info = res.data
			})
		},
		methods: {

		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	@include appBem_b(order-reservation-info) {
		padding-top:20rpx;
		@include appBem_e(label) {
			width:180rpx;
		}
	}
</style>